<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />

    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: t('order.refund.order_id') })">
      <template #cancelReasonText>
        <el-input v-model="baTable.comSearch.form['return_reason_text']"
                  :rows="2"
                  type="textarea"
                  placeholder="请输入取消原因" />
      </template>
    </TableHeader>

    <template style="display: block; margin: 10px 0;">
      <el-row :gutter="10"
              class="mb8">
        <el-col :span="1.5">
          <el-button type="primary"
                     @click="processedOperate"
                     v-if="baTable.auth('processed')">修改为已处理</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger"
                     @click="unprocessedOperate"
                     v-if="baTable.auth('unprocessed')">修改为未处理</el-button>
        </el-col>
      </el-row>
    </template>

    <el-tabs v-model="activeName"
             class="demo-tabs"
             @tab-click="handleStatus"
             type="border-card">
      <el-tab-pane label="全部"
                   name=""></el-tab-pane>
      <el-tab-pane label="取消退款请求"
                   name="CANCELLATION_REQUEST_CANCEL"></el-tab-pane>
      <el-tab-pane label="已退款"
                   name="CANCELLATION_REQUEST_COMPLETE"></el-tab-pane>
      <el-tab-pane label="正在处理"
                   name="CANCELLATION_REQUEST_PENDING"></el-tab-pane>
    </el-tabs>
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table />

    <!-- 表单 -->
    <PopupForm />
  </div>
</template>


<script setup lang="ts">
import { provide, reactive, ref } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi, fileDownload } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'
import {ElMessage , type TabsPaneContext } from 'element-plus'
import { processed, unprocessed } from '/@/api/backend/order/refund'
import Cookies from 'js-cookie'

defineOptions({
    name: 'order/refund',
})

const { t } = useI18n()
const adminInfo = useAdminInfo()
const activeName = ref('');
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false,
})

const optButtons = defaultOptButtons(['edit', 'delete'])
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}

const baTable = new baTableClass(
    new baTableApi('/order/refund/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('order.refund.order_id'), prop: 'order_id', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('order.refund.skuinfo'), prop: 'skus_info', align: 'center', operator: false },
            { label: t('order.refund.status'), prop: 'return_status', align: 'center', operator: false },
            { label: t('order.refund.reason'), prop: 'return_reason', align: 'center', operator: false },
            // { label: t('order.refund.reason_text'), prop: 'cancel_reason_text', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('order.refund.reason_text'),
                align: 'center',
                prop:  'return_reason_text',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'cancelReasonText',
            },
            { label: t('order.refund.type'), prop: 'return_type', align: 'center', operator: false, render: 'tag' },
            { label: t('order.refund.role'), prop: 'role', align: 'center', operator: false, render: 'tag' },
            { label: t('order.refund.Create time'), prop: 'create_time', align: 'center', operator: false, render: 'datetime' },
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

const handleStatus = (tab: TabsPaneContext) => {
    // baTable.filter = {'status': tab.props.name}
    baTable.comSearch.form['status'] = tab.props.name
    const comSearchData: Array<any> = baTable.table.filter?.search || [];
    comSearchData.push({
        field: "status",
        val: tab.props.name,
        operator: "",
        render: "",
    })
    baTable.onTableAction('com-search', comSearchData)
}

const processedOperate = () => {
    let ids = baTable.getSelectionIds()
    if (!ids.length) {
        ElMessage ({
            type: 'error',
            message: '请选择订单',
        })
        return
    }

    const params = { ids: ids}
    processed('post', params).then((res) => {
        baTable.onTableHeaderAction('refresh', {})
    })
}

const unprocessedOperate = () => {
    let ids = baTable.getSelectionIds()
    if (!ids.length) {
        ElMessage ({
            type: 'error',
            message: '请选择订单',
        })
        return
    }

    const params = { ids: ids}
    unprocessed('post', params).then((res) => {
        baTable.onTableHeaderAction('refresh', {})
    })
}

</script>

<style scoped lang="scss"></style>
